<!-- 项目设备页面 -->
<template>
    <div class="project-container">
     
      <el-card shadow="hover">
        <div class="equip-list">
         
          <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;">
            <span class="equip-title_span">审查任务表</span>
  
            <div
          
              style="
                display: flex;
                justify-content: flex-end;
                align-items: center;
              "
            >
              <el-button-group class="create-del-equip">
                <el-tooltip content="导出设备室/压力容器
设计文件标准化
审查表 " placement="top" effect="dark">
                  <el-button
                  class="button_mt"
                    type="primary"
                    color="#67c23a"
                    size="small"
                    :icon="Tickets"
                    tag="导出"
                    @click="clickDC"
                  />
                </el-tooltip>
             
               
              </el-button-group>
            </div>
          </div>
          
          <el-table
   
   @selection-change="handleSelectionChange"
   class="mmy-tables"
   :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
   :data="tableDatas"
   style="width: 100%"
   :height="activeHeight"
 >
   <el-table-column :selectable="selectable"  type="selection" width="30" />
   <el-table-column  width='70' type="index"  label="序号" />
   <el-table-column  width="120"   label="图纸阶段">
    <template #default="scope">
          <div v-if="
            !scope.row.drawing_stage || scope.row.drawing_stage == '工程图'
          ">
            {{ scope.row.drawing_stage }}
          </div>
          <div v-else style="color: red">{{ scope.row.drawing_stage }}</div>
        </template>
   </el-table-column>
   <el-table-column  prop="proj_no" width="120"   label="项目代号"/>
   <el-table-column prop="proj_name" show-overflow-tooltip width="270"  label="项目名称"/>
   <el-table-column  prop="equip_no" width="120" show-overflow-tooltip  label="设备位号"/>
   <el-table-column prop="equip_name"  show-overflow-tooltip  label="设备名称"/>
   <el-table-column prop="equip_dwg_no" width="100" show-overflow-tooltip   label="设备图号"/>
   <el-table-column prop="checker" width="100" show-overflow-tooltip   label="审核人">
    <template #default="{ row }">
       <el-tag type="success">{{row.checker}}</el-tag>
    </template>
   </el-table-column>
   <el-table-column prop="modify_user" width="100"  show-overflow-tooltip  label="派发人">
    <template #default="{ row }">
       <el-tag type="danger">{{row.modify_user}}</el-tag>
    </template>

   </el-table-column>
   <el-table-column prop="check_status" width="100" show-overflow-tooltip   label="审核状态">
    <template #default="{ row }">
      <div v-if="!row.check_status" style="display: flex;align-items: center">
        <div style="width: 10px;height: 10px;background-color: #f56c6c;border-radius: 50%;margin-right: 10px;"></div>
        <span>未审核</span>
      </div>
      <div v-if="row.check_status" style="display: flex;align-items: center">
        <div style="width: 10px;height: 10px;background-color: #67c23a;border-radius: 50%;margin-right: 10px;"></div>
        <span>审核通过</span>
      </div>
    </template>

   </el-table-column>
   <el-table-column prop="modify_time" show-overflow-tooltip   label="派发时间"/>
   <el-table-column fixed="right" label="操作" width="150" align="center">
     <template #default="{ row }">
       <el-button
        
         link
         type="primary"
         size="small"
         @click="checkDetail(row)"
         >查看详情</el-button
       >

       <el-popconfirm
      
         placement="left"
         @confirm="deleteRow(row)"
         title="确定要删除?"
       >
         <template #reference>
           <el-button  link type="danger" size="small">删除</el-button>
         </template>
       </el-popconfirm>
     </template>
   </el-table-column>
 </el-table>
        </div>
      </el-card>
  
      <el-dialog
      :close-on-click-modal="false"
      title="文件标准化审查"
        v-model="newDio"
        width="40%"
      >
    <div style="display: flex;align-items: center;justify-content: space-between;">
    <div style="margin-bottom: 20px;font-size: 12px;width: 49%;"><span>项目名称/代号：</span> <el-input style="margin-top: 10px" size="small" disabled v-model="proj_no_title"></el-input> </div>
   <div style="margin-bottom: 20px;font-size: 12px;width: 49%;"><span>设备名称/代号：</span> <el-input style="margin-top: 10px" size="small" disabled v-model="equip_name_title"></el-input></div>
  </div>
  <div  style="display: flex;align-items: center;">
    <div shadow="hover"  style="width: 50%;">
   <div class="flex_alitenm"> <span >1.公司Logo:</span>  
    <el-radio-group  v-model="checkFrom.checkItem010"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
  <div class="flex_alitenm"> <span >2.图框及图幅 </span>  
    <el-radio-group v-model="checkFrom.checkItem020"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
  <div class="flex_alitenm"> <span >3.会签及签署  </span>  
    <el-radio-group v-model="checkFrom.checkItem030"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
  <div class="flex_alitenm"> <span >4.签署的合法性 </span>  
    <el-radio-group v-model="checkFrom.checkItem040"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
  <div class="flex_alitenm"> <span >5.项目名称及代号一致性（含业主图签） </span>  
    <el-radio-group v-model="checkFrom.checkItem050"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >6.业主图签、图纸编号及密级 </span>  
    <el-radio-group v-model="checkFrom.checkItem060"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >7.件号连续性和一致性 </span>  
    <el-radio-group v-model="checkFrom.checkItem070"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >8.图号连续性和一致性 </span>  
    <el-radio-group v-model="checkFrom.checkItem080"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >9.设备名称一致性 </span>  
    <el-radio-group v-model="checkFrom.checkItem090"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
   
  </div>
  <div  shadow="hover"  style="width: 50%;">
   
    <div class="flex_alitenm"> <span >10.图纸张数与目录一致性 </span>  
    <el-radio-group v-model="checkFrom.checkItem100"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
  <div class="flex_alitenm"> <span >11.引用标准的时效性 </span>  
    <el-radio-group v-model="checkFrom.checkItem110"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>
  <div class="flex_alitenm"> <span >12.数据表内容完整性 </span>  
    <el-radio-group v-model="checkFrom.checkItem120"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >13.图面布置合理性  </span>  
    <el-radio-group v-model="checkFrom.checkItem130"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >14.压力容器类别标注  </span>  
    <el-radio-group v-model="checkFrom.checkItem140"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >15.III设备审定签署  </span>  
    <el-radio-group v-model="checkFrom.checkItem150"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  <div class="flex_alitenm"> <span >16.标准图的选用 </span>  
    <el-radio-group v-model="checkFrom.checkItem160"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>


  <div style="opacity: 0;" class="flex_alitenm"> <span >16.标准图的选用 </span>  
    <el-radio-group v-model="checkFrom.noData"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>



  <div style="opacity: 0;margin-bottom: 18px;" class="flex_alitenm"> <span >16.标准图的选用 </span>  
    <el-radio-group v-model="checkFrom.noData"  class="ml-4">
      <el-radio :label="true" size="small">合格</el-radio>
      <el-radio :label="false" size="small">不合格</el-radio>
    </el-radio-group>
  </div>

  
  </div>
  </div>
  <div style="display: flex;align-items: center;justify-content: space-between;">
    <div   shadow="hover"  style="width: 49%;">
   <div >
    <div style="margin-bottom: 10px;font-size: 12px">发现问题： </div>
    <el-input v-model="checkFrom.issue" class="mt_text" type="textarea"  resize='none'  :rows='4' ></el-input>
   </div>

   
  </div>
  <div  shadow="hover"  style="width: 49%;">
   <div >
    <div style="margin-bottom: 10px;font-size: 12px" >修改情况： </div>
    <el-input    v-model="checkFrom.modification_status" class="mt_text" type="textarea" resize='none'  :rows='4'></el-input>
   </div>

   
  </div>
  </div>

  <div style="display: flex;align-items: center;justify-content: flex-end;margin-top: 20px;">
    <el-button size="small" type="success" @click="checkDataSubmit">保存数据</el-button>
   <el-button size="small" type="primary" @click="checkDataSubmitS">审核通过</el-button>
  </div>
      </el-dialog>
  
  
  
    </div>
  </template>
  
  <script setup name="Project">

import JSZipUtils from "jszip-utils";
import docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import JSZip from "pizzip";
import ImageModule from 'docxtemplater-image-module-free'

  import { defineAsyncComponent, ref, reactive, onMounted, watch } from "vue";
  import { Plus, Delete, Warning,Upload,Tickets } from "@element-plus/icons-vue";
  import { useProjectStore } from "/@/stores/project";
  // import { ElMessageBox } from 'element-plus'
  import { useEquipmentStore } from "../../stores/equipment";
  /* 引入组件 */


  
  /* 引入API */
  import {
    UpdateStandCheckInfo,
    GetStandChecks,
    FinishStandCheckInfo,
    DeleteEquipFileStandReview
  } from "/@/api/equipment";

  import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
  /* 定义变量内容 */
  let selectedProject = ref({});
  const projectStore = useProjectStore();
  let EquipmentStore = useEquipmentStore();
  let equipments = ref([]);
  let tempEquipList = ref([]);
  
  let tableDatas = ref([])
  let DCdata = ref([])
  let handleSelectionChange = (data) => {
    DCdata.value = data
  }





 let  equip_name_title = ref('')
 let proj_no_title = ref('')
  let selectable = (row, index) => {
   
   return row.check_status
  }

  let deleteRow =async (row) => {
    let res = await DeleteEquipFileStandReview({oid:row.oid})
    if(res == 'True'){
      ElMessage({
        message: "删除成功",
        type: "success",
      })
    }else{
      ElMessage({
        message: "删除失败",
        type: "error",
      })
    }
    getTableData({
        proj_oid:projectStore.projectInfo.proj_oid,
        user_account:JSON.parse(localStorage.getItem("userMessage")).user_account
      })
  }
  
  let clickDC = () => {
    if(DCdata.value.length == 0){
      ElMessage({
        message: "请选择一条数据",
        type: "warning",
      })
      return
    }
 
    if(!DCdata.value.every(v=>v.proj_no === DCdata.value[0].proj_no)){
      ElMessage({
        message: "当前选择的项目不一致，无法生成文件，请重新选择！",
        type: "error",
      })
      return
    }
   
    let obj = {}
      Object.keys(checkFromDC.value).forEach(v=>{
        if(checkFromDC.value[v]){
          obj[v] = checkFromDC.value[v]
          obj[`${v}_1`] = false
        }else{
          obj[v] = checkFromDC.value[v]
          obj[`${v}_1`] = true
        }
      })
        exportWordDocx(obj)
  }


  let checkDataSubmit = async() => {
   
      await UpdateStandCheckInfo({...checkFrom.value})
      ElMessage({
        message: "保存成功",
        type: "success",
      })
      getTableData({
        proj_oid:projectStore.projectInfo.proj_oid,
        user_account:JSON.parse(localStorage.getItem("userMessage")).user_account
      })
   
  }

  let checkDataSubmitS =  async() => {
    await UpdateStandCheckInfo({...checkFrom.value})
   await FinishStandCheckInfo({oid:checkFrom.value.oid,modify_user:checkFrom.value.modify_user})
   ElMessage({
     message: "审核成功",
     type: "success",
   })
   getTableData({
        proj_oid:projectStore.projectInfo.proj_oid,
        user_account:JSON.parse(localStorage.getItem("userMessage")).user_account
      })

}

  let exportWordDocx  = (obj) => {
    var today = new Date();
var year = today.getFullYear();
var month = (today.getMonth() + 1).toString().padStart(2, '0'); // getMonth() 返回的月份是从 0 开始的
var day = today.getDate().toString().padStart(2, '0');
var dateStr = `${year}-${month}-${day}`; // 使用模板字符串拼接最终的日期格式
    const url = "/test.docx";
    JSZipUtils.getBinaryContent(url,(err, data)=>{
      if (err) {
      ElMessage.error("导出报告出错");
      console.log("err:", err);
      return;
    }
    let zip = new JSZip(data);
    const Docxtemplater = docxtemplater;
    const imageOptions = {
      centered: false,
      getImage(tagValue, tagName) {
        return new Promise(function (resolve, reject) {
          JSZipUtils.getBinaryContent(tagValue, function (error, content) {
            if (error) {
              return reject(error);
            }
            return resolve(content);
          });
        });
      },
      getSize(img, tagValue, tagName) {
        // 非固定大小（这里是设置宽度最大为500px的图片）
        return new Promise(function (resolve, reject) {
          let image = new Image();
          image.src = tagValue;
          let imgWidth, imgHeight, scale;
          image.onload = function () {
            imgWidth = image.width;
            imgHeight = image.height;
            scale = 0;
            if (imgWidth > 500) {
              scale = 500 / imgWidth;
              imgWidth = 500;
              imgHeight = imgHeight * scale;
            }
            resolve([imgWidth, imgHeight]);
          };
          image.onerror = function (e) {
            console.log("img, tagValue, tagName : ", img, tagValue, tagName);
            reject(e);
          };
        });
      },
    };

    const nullGetter = (part, scopeManager) => {
      if (!part.module) {
        return "";
      }
    };
    let doc = new Docxtemplater(zip, {linebreaks: true,  nullGetter: nullGetter, modules: [new ImageModule(imageOptions)] });
    let reportInfo = {}; 
    reportInfo={...obj}
    reportInfo.proj_no = DCdata.value[0].proj_no
    reportInfo.proj_name= DCdata.value[0].proj_name
    reportInfo.sender = DCdata.value[0].sender
    reportInfo.checker = DCdata.value[0].checker
    console.log(reportInfo.sender,reportInfo.checker)
    reportInfo.modify_time = dateStr
    reportInfo.equip_no_arr = DCdata.value.map((v,i)=>{
      if(i== DCdata.value.length-1){
       return `${v.equip_no}`
      }else{
       return `${v.equip_no}/`
      }
    })
    reportInfo.issue_arr = DCdata.value.map(v=>`${v.equip_no}：${v.issue || '未发现问题'}`)
    reportInfo.modification_status_arr = DCdata.value.map(v=>`${v.equip_no}：${v.modification_status || '无'}`)

    doc.resolveData({...reportInfo}).then(()=>{
      doc.render();
      let out = doc.getZip().generate({
        type: "blob",
        MimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      saveAs(out, "设备室/压力容器设计文件标准化审查表.docx");
    })
  })
  }

  
  let checkFrom = ref({
    checkItem010: true,
     "checkItem020": true,
        "checkItem030": true,
        "checkItem040": true,
        "checkItem050": true,
        "checkItem060": true,
        "checkItem070": true,
        "checkItem080": true,
        "checkItem090": true,
        "checkItem100": true,
        "checkItem110": true,
        "checkItem120": true,
        "checkItem130": true,
        "checkItem140": true,
        "checkItem150": true,
        "checkItem160": true,
        "issue": null,
        "modification_status": null,
  })


  let checkFromDC = ref({
         checkItem010: true,
        "checkItem020": true,
        "checkItem030": true,
        "checkItem040": true,
        "checkItem050": true,
        "checkItem060": true,
        "checkItem070": true,
        "checkItem080": true,
        "checkItem090": true,
        "checkItem100": true,
        "checkItem110": true,
        "checkItem120": true,
        "checkItem130": true,
        "checkItem140": true,
        "checkItem150": true,
        "checkItem160": true,
        "issue": null,
        "modification_status": null,
  })
  


  
  let destEquipInfoRef = ref("");
  
  let newDio = ref(false);
  


  let checkData = ref({})
  let checkDetail = (row) => {
    proj_no_title.value =  `${row.proj_no } /  ${row.proj_name}`
    
    checkData.value = row
    equip_name_title.value =  `${checkData.value.equip_name } /  ${checkData.value.equip_no}`
    newDio.value = true
    checkFrom.value = row
  }
  
 

  watch(()=>EquipmentStore.showList,()=>{
    
    if(Object.keys(EquipmentStore.showList).length>0){
     
     checkDetail(EquipmentStore.showList)
     EquipmentStore.showList = {}
  }
  },{deep:true,immediate:true})

  

  let activeHeight = ref(0);



  
  const handleClick = (tab, event) => {
    console.log(tab, event);
  };
  
  let unit_oidOptions = ref([]);

  let approverOptions = ref([])
  let auditorOptions = ref([])
  let equip_designerOptions = ref([])
  let equip_checkerOptions = ref([])
  let SelectEquip_no = ref([]);
  let equipEquip_no = ref([]);
  
  let SelectEquip_class = ref([]);
  let equipEquip_class = ref([]);
  

  let getTableData =async (data) => {
   let res = await GetStandChecks(data)
   let data1 = res.filter(v=>!v.check_status)
   let data2 = res.filter(v=>v.check_status)
   tableDatas.value = [...data1,...data2]
  }

  watch(
    () => projectStore.projectInfo,
    (newVal, oldVal) => {
      selectedProject.value = newVal;
      getTableData({
        user_account:JSON.parse(localStorage.getItem("userMessage")).user_account
      })
    },{immediate:true}
  );
  
  let SelectMajor = ref([]);
  let equipOptions = ref([]);
  
  let equip_nameInput = ref([]);
  let nameOptions = ref([]);

  /* 定义生命周期函数 */
  onMounted(() => {
    activeHeight.value =
    document.querySelector(".project-container").clientHeight - 100;
  window.addEventListener("resize", () => {
    activeHeight.value =
      document.querySelector(".project-container").clientHeight - 100;
  });


  

  });
  </script>
  
  <style scoped lang="scss">
  
  .text_{
    padding: 10px;
  }
  .flex_alitenm{
    span{
      width: 54%;
      font-size: 12px;
      margin-right:10px ;
    }
    display: flex;
    margin-bottom: 10px;
    align-items: center;
  }
  .project-infor-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  
  .equip-list {
    min-height: calc(100vh - 170px);
    background-color: #fff;
  }
  
  .equip-title_span {
    font-weight: bold;
    margin-right: auto;
    font-size: 1.5em;
    padding-left: 8px;
    border-left: 6px solid #67c23a;
  }
  .equip-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
  
    .el-button-group {
      display: flex;
      align-items: center;
  
      margin-left: 16px;
    }
  }
  
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .img_hualu{
    position: absolute;
      transform: scale(0.5) rotate(0deg);
      top: -13px;
      right: -102px;
      z-index: 88;
      opacity: .7;
  }
  .card-header{
    font-size: 25px;
    font-weight: bolder;
  }
  </style>
  